<template>
  <div class="components-container">
    <el-card class="table_style">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        class="form-container"
      >
        <el-form-item label="用户组名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input v-model.number="form.sort" />
        </el-form-item>

        <el-form-item label="菜单与权限" prop="permissions">
          <el-tree
            ref="tree"
            :data="permissions"
            :props="{ label: 'title' }"
            show-checkbox
            node-key="id"
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
            :check-on-click-node="true"
            :check-strictly="true"
          />
        </el-form-item>

        <el-form-item>
          <el-button v-loading="loading" type="primary" @click="submitForm">
            {{ isEdit ? "立即更新" : "立即创建" }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { fetchRole, createRole, updateRole } from '@/api/role'
import { fetchPermissionList } from '@/api/permission'
export default {
  name: 'RoleForm',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      permissions: [],
      form: {
        name: '',
        sort: 0,
        permissions: []
      },
      rules: {
        name: [
          { required: true, message: '请输入用户组名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 ~ 20 位', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' },
          { type: 'number', message: '排序必须为数字值' }
        ]
      },
      loading: false
    }
  },
  created() {
    // 获取权限列表
    this.fetchPermissions()

    // 如果是编辑
    if (this.isEdit) {
      this.fetchData()
    }
  },
  methods: {
    // 获取所有权限
    async fetchPermissions() {
      const res = await fetchPermissionList()
      this.permissions = res.data.permissions
    },
    // 获取当前用户组数据及对应的权限
    async fetchData() {
      const id = this.$route.params.id
      const res = await fetchRole(id)
      this.form = res.data.role

      const permissions = res.data.permissions.map((item) => item.id)
      this.$refs.tree.setCheckedKeys(permissions)
    },
    submitForm() {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          this.loading = true

          // 获取选中的节点
          this.form.permissions = this.$refs.tree.getCheckedKeys()

          try {
            let res
            if (this.isEdit) {
              const id = this.$route.params.id
              res = await updateRole(id, this.form)
            } else {
              res = await createRole(this.form)
            }

            this.$message.success(res.message)
            this.loading = false
            await this.$router.push({ name: 'Role' })
          } catch (err) {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>

<style>
.table_style{
  margin: 15px;
}
</style>
